<template>
  <div class="">
    <!-- 取消弹窗 -->
    <popup
      v-model="visible"
      title="取消订单"
      submitText="确认取消"
      :submitFn="onSubmit"
      @close="onClose"
    >
      <div class="cancel-content">
        <cell-form label="取消时间" required>
          <pickerTrigger
            :value="form.cancelTime"
            @onClick="onCancelTimeClick"
          />
        </cell-form>
        <cell-form label="取消原因">
          <pickerTrigger
            :value="form.cancelReason"
            @onClick="onCancelReasonClick"
          />
        </cell-form>
        <cell-form label="客户承担取消费" required v-if="showCancelFee">
          <input-number
            placeholder="请输入"
            v-model="form.cancelAmount"
            unit="元"
          />
        </cell-form>
        <cell-form label="支付服务商取消费" required v-if="showCancelFee">
          <input-number
            placeholder="请输入"
            v-model="form.providerCancelAmount"
            unit="元"
          />
        </cell-form>
      </div>
    </popup>
    <!-- 时间选择 -->
    <popup
      v-model="cancelTimePopup.visible"
      title="选择取消时间"
      @submit="onCancelTimePopupSubmit"
    >
      <datePicker
        ref="datePickerRef"
        :max="cancelTimePopup.cancelTimeMax"
        v-model="cancelTimePopup.tempTime"
      />
    </popup>
    <!-- 原因选择 -->
    <popup
      v-model="cancelReasonPopup.visible"
      title="选择取消原因"
      @submit="onCancelReasonPopupSubmit"
    >
      <div class="cancel-reason-list">
        <scroll-view
          style="height: 100%"
          scroll-y
          :scroll-with-animation="true"
        >
          <div
            class=""
            v-for="(reason, index) in cancelReasonPopup.cancelReasonMap"
            :key="index"
          >
            <div
              class="cancel-reason-item"
              @click="() => (cancelReasonPopup.tempReason = reason.value)"
            >
              <div class="reason-content">{{ reason.value }}</div>
              <div class="reason-choice">
                <image
                  class="choice-icon"
                  mode="aspectFit"
                  :src="`../../../static/images_qccx/${
                    cancelReasonPopup.tempReason == reason.value
                      ? 'choice_active'
                      : 'choice'
                  }.png`"
                />
              </div>
            </div>
            <u-line margin="0" color="#e7e7e7" />
          </div>
        </scroll-view>
      </div>
    </popup>
    <!-- toast -->
    <u-toast ref="uToast" />
  </div>
</template>
<script>
import popup from "./popup.vue";
import cellForm from "./cell-form.vue";
import pickerTrigger from "./picker-trigger.vue";
import datePicker from "./date-picker.vue";
import inputNumber from "./input-number.vue";
import dayjs from "dayjs";
import { getEnums, getCancelPrice, orderCancel } from "@/api/qccx.js";
export default {
  components: {
    popup,
    cellForm,
    pickerTrigger,
    datePicker,
    inputNumber,
  },
  data() {
    return {
      visible: false,
      // 时间选择
      cancelTimePopup: {
        visible: false,
        tempTime: "",
        cancelTimeMax: "",
      },
      // 原因选择
      cancelReasonPopup: {
        visible: false,
        cancelReasonMap: [], // 取消原因
        tempReason: "",
      },
      form: {},
      // 订单信息
      orderInfo: {},
      // 取消是否收费
      showCancelFee: false,
    };
  },
  methods: {
    show(orderInfo) {
      this.visible = true;
      this.orderInfo = orderInfo;
      this.form.cancelTime = dayjs().format("YYYY-MM-DD HH:mm");
      this.form.id = orderInfo.id;
      // 订单状态
      const status = orderInfo.status;
      // 获取取消费用
      if (status != 10) {
        this.getCancelFee();
      }
      // 获取取消原因数据源
      getEnums({}).then((res) => {
        const result = res.result;
        const cancelReasonMap = result.cancelReasonMap;
        this.cancelReasonPopup.cancelReasonMap = cancelReasonMap;
      });
    },
    onClose() {
      this.orderInfo = {};
      this.form = {};
      this.showCancelFee = false;
    },
    onSubmit() {
      return new Promise((resolve, reject) => {
        // 保证触发inputNumber的blur
        this.$nextTick(() => {
          // 取消时间
          if (!this.form.cancelTime) {
            this.$toast("请选择取消时间");
            reject();
            return;
          }
          if (this.showCancelFee) {
            if (!this.isValid(this.form.cancelAmount)) {
              this.$toast("请输入客户承担取消费");
              reject();
              return;
            }
            if (!this.isValid(this.form.providerCancelAmount)) {
              this.$toast("请输入支付服务商取消费");
              reject();
              return;
            }
          }
          const param = {
            id: this.form.id,
            cancelTime: this.form.cancelTime,
            cancelAmount: Number(this.form.cancelAmount),
            cancelReason: this.form.cancelReason,
            providerCancelAmount: Number(this.form.providerCancelAmount),
          };
          orderCancel(param)
            .then((res) => {
              this.$refs.uToast.show({ title: "操作成功" });
              this.$emit("success");
              resolve();
            })
            .catch(() => {
              reject();
            });
        });
      });
    },
    /**
     * 获取取消费
     */
    getCancelFee() {
      // 订单状态为已分发
      if (this.orderInfo.status != 10 && this.form.cancelTime) {
        getCancelPrice({
          id: this.form.id,
          cancelTime: this.form.cancelTime,
        }).then((res) => {
          if (res.code == 200) {
            const result = res.result;
            // 无取消费
            if (result.cancelType == 1) {
              this.showCancelFee = false;
              // 处理默认值
              this.form.cancelAmount = 0;
              this.form.providerCancelAmount = 0;
            } else if (result.cancelType == 3) {
              // 有取消费
              this.showCancelFee = true;
              this.form.cancelAmount =
                (Number(result.totalAmount) * Number(result.discount)) / 100;
            }
          }
        });
      }
    },
    /**
     * 取消时间
     */
    onCancelTimeClick() {
      this.cancelTimePopup.visible = true;
      this.cancelTimePopup.tempTime = this.form.cancelTime;
      this.cancelTimePopup.cancelTimeMax = dayjs().format("YYYY-MM-DD HH:mm");
      this.$nextTick(() => {
        this.$refs.datePickerRef.init();
      });
    },
    /**
     * 取消时间弹窗提交
     */
    onCancelTimePopupSubmit() {
      this.form.cancelTime = this.cancelTimePopup.tempTime;
      this.getCancelFee();
    },
    /**
     * 取消原因
     */
    onCancelReasonClick() {
      this.cancelReasonPopup.visible = true;
      this.cancelReasonPopup.tempReason = this.form.cancelReason;
    },
    /**
     * 取消原因弹窗提交
     */
    onCancelReasonPopupSubmit() {
      this.form.cancelReason = this.cancelReasonPopup.tempReason;
    },
  },
};
</script>
<style lang="scss" scoped>
.cancel-content {
  padding: 0 32rpx;
}
.cancel-reason-list {
  padding: 0 32rpx;
  height: 226px;
  .cancel-reason-item {
    display: flex;
    padding: 32rpx 0;
    .reason-content {
      flex: 1;
      line-height: 44rpx;
      font-size: 28rpx;
      color: #1a1a1a;
    }
    .reason-choice {
      width: 40rpx;
      height: 40rpx;
      flex-shrink: 0;
      .choice-icon {
        width: 40rpx;
        height: 40rpx;
      }
    }
  }
}
</style>
